<!-- 13 -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button class="t9-form-wideget-btn-default" type="primary" :loading="searchBtnLoading" @click="handleSearch">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      group="WipByProduct"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
      >
          <a-form-item :label="$t('T9_shopId')" name="shopId">
          <a-select v-model:value="queryForm.shopId"  :placeholder="$t('common_pleaseSelect')" class="t9-form-wideget-input-default">
           <a-select-option v-for="item in options.shopIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
          <a-form-item :label="$t('T9_productVer')" name="productVer">
          <a-select v-model:value="queryForm.productVer" show-search  allow-clear :placeholder="$t('common_pleaseSelect')"  class="t9-form-wideget-input-default">
            <a-select-option v-for="item in options.eqpIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
          <a-form-item :label="$t('T9_productType')" name="productType">
          <a-select v-model:value="queryForm.productType" show-search  allow-clear :placeholder="$t('common_pleaseSelect')"  class="t9-form-wideget-input-default">
            <a-select-option v-for="item in options.productTypeList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
          <a-form-item :label="$t('T9_productId')" name="productId">
          <a-select v-model:value="queryForm.productId" show-search  allow-clear :placeholder="$t('common_pleaseSelect')"  class="t9-form-wideget-input-default">
            <a-select-option v-for="item in options.productIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
          <a-form-item :label="$t('T9_ownerType')" name="ownerType">
          <a-select v-model:value="queryForm.ownerType" show-search  allow-clear :placeholder="$t('common_pleaseSelect')"  class="t9-form-wideget-input-default">
            <a-select-option v-for="item in options.ownerTypeList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
          <a-form-item :label="$t('T9_owner')" name="owner">
          <a-select v-model:value="queryForm.owner" show-search  allow-clear :placeholder="$t('common_pleaseSelect')"  class="t9-form-wideget-input-default">
            <a-select-option v-for="item in options.ownerIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
          <a-form-item :label="$t('T9_groupId')" name="groupId">
          <a-select v-model:value="queryForm.groupId" show-search  allow-clear :placeholder="$t('common_pleaseSelect')"  class="t9-form-wideget-input-default">
            <a-select-option v-for="item in groupIdArr"
            :key="item.bayId" :value="item.bayId">
            {{item.bayId}}
            </a-select-option>
          </a-select>
        </a-form-item>
    </t-query-form>
    <div class="data-form">
      <a-form
          ref="form"
          layout="inline"
          :colon="false"
          :model="form"
        >
         <a-form-item :label="$t('T9_totalCst')" name="totalCst">
           <a-input v-model:value="form.totalCst" :disabled="true"  class="t9-form-wideget-input-default"/>
          </a-form-item>
             <a-form-item :label="$t('T9_totalGlass')" name="totalGlass">
            <a-input v-model:value="form.totalGlass" :disabled="true"  class="t9-form-wideget-input-default" />
          </a-form-item>
            <a-form-item :label="$t('T9_totalOwner')" name="detect">
            <a-input v-model:value="form.totalOwner" :disabled="true"  class="t9-form-wideget-input-default" />
          </a-form-item>
        </a-form>
    </div>
      <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-1">
        <a-col :span="15" class="global-oper-row-title">{{ $t('T9_cstList') }}</a-col>
        <a-col :span="8" class="global-oper-row-extra">
          <a-button class="t9-form-wideget-btn-default" @click="getExport" type="primary">{{ $t('T9_toExcel') }}</a-button>
        </a-col>
      </a-row>
      <div class="page-wrap-table">
        <t-table align="center"
          :data="list.tableData"
          max-height="100%"
          :loading="searchBtnLoading"
          @checkbox-change="handleCheckChange"
          @cell-dblclick="handledbClick"
        >
          <t-column type="checkbox" width="50"></t-column>
          <t-column min-width="100" field="lastComment" :title="$t('T9_lastComment')" />
          <t-column min-width="100" field="cstId" :title="$t('T9_cstId')" />
          <t-column min-width="100" field="productId" :title="$t('T9_productId')" />
          <t-column min-width="100" field="owner" :title="$t('T9_owner')" />
          <t-column min-width="100" field="productSpecVer" :title="$t('T9_productSpecVer')" />
          <t-column min-width="100" field="operation" :title="$t('T9_operation')" />
          <t-column min-width="100" field="desc" :title="$t('T9_desc')" />
          <t-column min-width="100" field="glassQty" :title="$t('T9_glassQty')" />
          <t-column min-width="100" field="maxStayHour" :title="$t('T9_maxStayHour')" />
          <t-column min-width="100" field="minqtime" :title="$t('T9_minqtime')" />
          <t-column min-width="100" field="beforeEqId" :title="$t('T9_beforeEqId')" />
          <t-column min-width="100" field="transferState" :title="$t('T9_transferState')" />
          <t-column min-width="100" field="cstLocation" :title="$t('T9_cstLocation')" />
          <t-column min-width="100" field="floor" :title="$t('T9_floor')" />
          <t-column min-width="100" field="sheetId" :title="$t('T9_sheetId')" />
          <t-column min-width="100" field="futureSheetQty" :title="$t('T9_futureSheetQty')" />
          <t-column min-width="100" field="dspFlag" :title="$t('T9_dspFlag')" />
          <t-column min-width="100" field="panelQty" :title="$t('T9_panelQty')" />
          <t-column min-width="100" field="holdState" :title="$t('T9_holdState')" />
          <t-column min-width="100" field="rtsFlag" :title="$t('T9_rtsFlag')" />
          <t-column min-width="100" field="batch" :title="$t('T9_batch')" />
          <t-column min-width="100" field="processState" :title="$t('T9_processState')" />
          <t-column min-width="100" field="route" :title="$t('T9_route')" />
          <t-column min-width="100" field="ownerType" :title="$t('T9_ownerType')" />
          <t-column min-width="100" field="preRoute" :title="$t('T9_preRoute')" />
          <t-column min-width="100" field="preOperation" :title="$t('T9_preOperation')" />
          <t-column min-width="100" field="hostMachineRecipeName" :title="$t('T9_hostMachineRecipeName')" />
          <t-column min-width="100" field="portId" :title="$t('T9_portId')" />
          <t-column min-width="100" field="timeUsed" :title="$t('T9_timeUsed')" />
          <t-column min-width="100" field="groupId" :title="$t('T9_groupId')" />
          <t-column min-width="100" field="productType" :title="$t('T9_productType')" />
          <t-column min-width="100" field="department" :title="$t('T9_department')" />
          <t-column min-width="100" field="priority" :title="$t('T9_priority')" />
          <t-column min-width="100" field="reservedEqId" :title="$t('T9_reservedEqId')" />
          <t-column min-width="100" field="reworkState" :title="$t('T9_reworkState')" />
          <t-column min-width="100" field="createTime" :title="$t('T9_createTime')" />
          <t-column min-width="100" field="needReworkCount" :title="$t('T9_needReworkCount')" />
          <t-column min-width="100" field="increaseConfirmationSheetName" :title="$t('T9_increaseConfirmationSheetName')" />
          <t-column min-width="100" field="inlineReworkCount" :title="$t('T9_inlineReworkCount')" />
        </t-table>
      </div>
      <div class='data-form page-wrap-bottom mt-1'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules2"
        >
            <a-form-item :label="$t('T9_detect')" name="detect">
            <a-select v-model:value="dataForm.detect" allow-clear :placeholder="$t('common_pleaseSelect')"  class="t9-form-wideget-input-default" >
              <a-select-option v-for="item in options.newPrTypeList"
              :key="item.newPrType" :value="item.newPrType" :prdesc="item.desc">
              {{item.newPrType}}
              </a-select-option>
            </a-select>
          </a-form-item>
            <a-form-item :label="$t('T9_hold')" name="hold">
            <a-select v-model:value="dataForm.hold" allow-clear :placeholder="$t('common_pleaseSelect')"  class="t9-form-wideget-input-default" >
              <a-select-option v-for="item in options.newPrTypeList"
              :key="item.newPrType" :value="item.newPrType" :prdesc="item.desc">
              {{item.newPrType}}
              </a-select-option>
            </a-select>
          </a-form-item>
            <a-form-item :label="$t('T9_glassInfoChange')" name="glassInfoChange">
            <a-select v-model:value="dataForm.glassInfoChange" allow-clear :placeholder="$t('common_pleaseSelect')"  class="t9-form-wideget-input-default" >
              <a-select-option v-for="item in options.newPrTypeList"
              :key="item.newPrType" :value="item.newPrType" :prdesc="item.desc">
              {{item.newPrType}}
              </a-select-option>
            </a-select>
          </a-form-item>
            <a-form-item :label="$t('T9_abnormalForm')" name="abnormalForm">
            <a-select v-model:value="dataForm.abnormalForm" allow-clear :placeholder="$t('common_pleaseSelect')"  class="t9-form-wideget-input-default" >
              <a-select-option v-for="item in options.newPrTypeList"
              :key="item.newPrType" :value="item.newPrType" :prdesc="item.desc">
              {{item.newPrType}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import { shopIdList } from '@/views/options'
  import { downloadBlobFile } from '@/utils/download'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  export default defineComponent({
    name: 'WipByProduct',
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        export: false,
        list: {
          tableData: []
        },
        groupIdArr: [],
        version: '',
        form: {
          totalCst: '',
          totalGlass: '',
          totalOwner: ''
        },
        queryForm: {
          shopId: 'ARRAY',
          productVer: undefined,
          productType: undefined,
          productId: undefined,
          ownerType: undefined,
          owner: undefined,
          groupId: undefined
        },
        options: {
          shopIdList
        },
        dataForm: {
          detect: undefined,
          hold: undefined,
          glassInfoChange: undefined,
          abnormalForm: undefined
        },
        rules: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        }
      }
    },
    computed: {},
    created() {
      this.initOptions([{ name: 'productType' }])
    },
    watch: {
      'queryForm.shopId': {
        handler(shopId) {
          this.initOptions([{ name: 'ownerType', params: { shopId, bayId: '', version: '80024' } }])
          this.getGroupId()
        },
        immediate: true
      },
      'queryForm.productType': {
        handler(productType) {
          this.queryForm.productId = ''
          this.initOptions([{ name: 'productId', params: { shopId: this.queryForm.shopId, productType } }])
          this.getGroupId()
        }
      },
      'queryForm.ownerType': {
        handler(ownerType) {
          this.initOptions([{ name: 'ownerId', params: { shopId: this.queryForm.shopId, ownerType } }])
        }
      }
    },
    methods: {
      handledbClick(row) {
        this.$router.push({
        path: 'glassList',
        query: {
          code: row.row
        }
      })
      },
      getGroupId() {
        const params = {
          queryId: 'GetGroupIDList',
          shopId: this.queryForm.shopId,
          version: '80004',
          dtoName: 'GroupIdDTO',
          lotState: 'Released',
          menuName: 'viewWipByProduct',
          usage: 'getGroupId',
          productType: this.queryForm.productType
        }
        api.getList(params).then(res => {
          this.groupIdArr = res
        })
      },
      getList() {
         if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            if (this.queryForm.shopId === ('ARRAY', 'CF')) {
              this.version = '81127'
            } else if (this.queryForm.productType && this.queryForm.productId && !this.queryForm.groupId) {
              this.version = '81126'
            } else if (this.queryForm.productType && !this.queryForm.productId && !this.queryForm.groupId) {
              this.version = '81128'
            } else if (this.queryForm.productType && this.queryForm.groupId && !this.queryForm.productId) {
              this.version = '81129'
            } else if (this.queryForm.productType && this.queryForm.productId && this.queryForm.groupId) {
              this.version = '81130'
            } else {
              this.version = '81131'
            }
            const basicParams = {
              queryId: 'GetLotList',
              version: this.version,
              dtoName: 'ViewWipByProductListDTO',
              menuName: 'viewWipByProduct',
              usage: 'getCstList',
              glassQty: '',
              lotState: 'Released',
              site: 'T7',
              export: this.export
            }
            api
              .getList({ ...this.queryForm, ...basicParams })
              .then((res) => {
                if (this.export) {
                  this.export = false
                  downloadBlobFile(res, 'cstList')
                } else {
                this.list.tableData = res.cstList || []
                this.form.totalCst = res.totalCst
                this.form.totalGlass = res.totalPanel
                this.form.totalOwner = res.totalOwner
                }
                this.searchBtnLoading = false
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
      },
      getExport() {
        if (!this.list.tableData.length) return
        this.export = true
        this.getList()
      },
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
           this.getList()
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang='less' scoped>
.t9-form-wideget-input-default {
  width: 150px;
}
</style>
